<template>
  <div class="flex-container">
    <div class="flex-left">
      <div class="grid-container">
        <div class="grid-item">
          <Map />
        </div>
        <div class="grid-item">
          <Boat />
        </div>
        <div class="grid-item">
          <Beam />
        </div>
        <div class="grid-item">
          <Beam3D />
        </div>
      </div>
    </div>
    <div class="flex-right">
      <Cesium />
    </div>
  </div>
</template>

<script>
// 引入组件
import Map from '@/views/test/Map.vue';
import Boat from '@/views/test/Boat.vue';
import Cesium from '@/views/test/Cesium.vue';
import Beam from '@/views/test/Beam.vue';
import Beam3D from '@/views/test/Beam3D.vue';

export default {
  name: 'Home',
  components: {
    Map,
    Boat,
    Cesium,
    Beam,
    Beam3D
  }
};
</script>

<style scoped>
.flex-container {
  display: flex;
  height: 100%;
}

.flex-left {
  flex: 1;
  display: flex;
}

.flex-right {
  flex: 2;
}

.grid-container {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.grid-item {
  border: 1px solid #ccc;
}
</style>
